{extend name="base"/}
{block name="resources"}

<style>
    .ns-card-head-right {
        display: flex;
        align-items: center;
    }

    .ns-card-head-right .layui-form-item {
        margin-bottom: 0;
    }

    .current-time, .ns-flow-time-today {
        margin-left: 10px;
        line-height: 34px;
    }

    /* 基本信息 */
    .ns-basic {
        display: flex;
    }

    .ns-basic .ns-table-tuwen-box {
        width: 30%;
        border-right: 1px solid #EEEEEE;
        padding: 10px 20px;
    }

    .ns-basic-count {
        font-size: 20px;
        font-weight: 600;
    }

    .ns-survey-info {
        margin: 0;
    }

    .ns-survey-info .layui-card-body {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-con {
        display: inline-block;
        width: calc((100% - 90px) / 2);
        margin-right: 30px;
        margin-bottom: 30px;
        background-color: #FFF;
        box-sizing: border-box;
        position: relative;
        border:1px #F3F3F3 solid;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-con:last-child {
        margin-right: 0;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-aco {
        font-size: 16px;
        line-height: 18px;
        margin-top: 20px;
        font-weight: 400;
        padding: 0 20px;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-num {
        margin: 10px 0;
        font-size: 36px;
        font-weight: 400;
        margin-top: 48px;
    }

    .ns-survey-detail-rate {
        font-size: 14px;
        line-height: 30px;
        display: flex;
        align-items: center;
        margin-top: 25px;
    }

    .ns-survey-detail-rate div i {
        margin-left: 5px;
    }

    .ns-survey-detail-rate div:nth-child(2) {
        margin-left: 25px;
    }

    .layui-icon-triangle-d {
        font-size: 12px;
        display: inline-block;
        transform: scale(0.8, 0.9);
        -webkit-transform: scale(0.8, 0.9);  /*兼容-webkit-引擎浏览器*/
        -moz-transform: scale(0.8, 0.9);     /*兼容-moz-引擎浏览器*/
        color: #5ED300;
    }

    .layui-icon-increase {
        transform: scale(0.8, 0.9) rotate(180deg);
        -ms-transform: rotate(180deg); 	/* IE 9 */
        -moz-transform: scale(0.8, 0.9) rotate(180deg); 	/* Firefox */
        -webkit-transform: scale(0.8, 0.9) rotate(180deg); /* Safari 和 Chrome */
        -o-transform: rotate(180deg); 	/* Opera */
    }

    .layui-icon-triangle-d.is-null {
        display: none;
    }

    .ns-survey-detail-split {
        width: 100%;
        height: 1px;
        background-color: #FFFFFF;
    }

    .ns-survey-detail-total {
        display: flex;
        justify-content: space-between;
        margin: 18px 0 15px;
        font-size: 14px;
        line-height: 16px;
    }

    .ns-prompt-block {
        position: absolute;
        top: 18px;
        right: 20px;
        font-size: 12px;
        cursor: pointer;
    }

    .ns-prompt-block .ns-prompt {
        width: auto;
        height: auto;
        line-height: unset;
    }

    .ns-prompt-block .ns-prompt-box {
        top: 40px;
        left: -53px;
        width: 150px;
        text-align: center;
    }

    .ns-prompt-block .ns-prompt-box:before, .ns-prompt-block .ns-prompt-box:after {
        left: 62px;
        top: unset;
    }

    .ns-prompt-block .ns-prompt-box:before {
        border-bottom-color: #e4e4e4;
        border-right-color: transparent;
        top: -25px;
    }

    .ns-prompt-block .ns-prompt-box:after {
        border-bottom-color: #FFFFFF;
        border-right-color: transparent;
        top: -23px;
    }

    .ns-survey-yesterday-btn {
        font-size: 12px;
        width: 44px;
        height: 22px;
        padding: 0;
        line-height: 22px;
    }

    /* .ns-survey-info .layui-card-body .ns-survey-detail-yesterday {
        font-size: 14px;
        font-weight: 400;
        color: rgba(175, 175, 175, 1);
    } */

    /*  */
    .ns-survey-right .layui-card {
        border: 1px solid #f1f1f1;
        box-shadow: inherit;
    }

    .ns-survey-right .layui-card .layui-card-body {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ns-shop-state {
        margin: 30px 40px 0;
        padding: 10px;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 35px;
        background-color: rgba(255, 129, 67, 0.1);
        color: #fff;
        border: 1px solid red;
    }

    .ns-shop-state p {
        color: #666;
    }

    .ns-shop-state p i {
        margin-right: 6px;
    }

    .ns-shop-state button {
        border: none;
        background-color: transparent;
        cursor: pointer;
    }



    .statistics-wrap {
        display: flex;
    }

    .statistics-wrap .item{
        display: inline-block;
        width: calc((100% - 90px) / 4);
        margin-right: 30px;
        margin-bottom: 30px;
        display: flex;
    }

    .statistics-wrap .item:last-child{
        margin-right: 0;
    }

    .statistics-wrap .item .flex-box {
        flex: 1;
        background: #f5f5f5;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .statistics-wrap .item .flex-box:first-child {
        margin-right: 30px;
    }

    .statistics-wrap .flex-box .title{
        font-size: 14px;
    }

    .statistics-wrap .flex-box .num{
        font-size: 28px;
        font-weight: 400;
        color: #4685FD;
        margin-top: 10px;
    }
    .modelBox {
        background-color: #f5f5f5;
        padding: 20px;
        padding-bottom: 10px;
        width: 340px;
        box-sizing: box-sizing;
        margin-right: 10px;
    }
    .modelBox .titleA {
        font-weight: 600;
        color: #818181 !important;
        padding-bottom: 10px;
    }
    .newinfo {
        width: 340px;
        display:flex;
        justify-content:space-between;
        align-items:end;
        margin-top: 10px;
    }
    .newinfo .newinfoA {
        color:#837f7b;
        font-size:13px;
        line-height:13px;

    }
    .newinfo .newinfoB {
        font-weight:600;
        font-size:28px;
        color:#262626;
        width: 35%;
        line-height:24px;
        text-align: right;
        margin-top: 4px;
    }
    .newinfoC {
        display:flex;
        width: 35%;
        color:#21201f;
        font-size:13px;
        line-height:13px;
        height: 13px;
        text-align: right;
    }
</style>
{/block}
{block name="main"}

<!--<div>
    <h2 style="padding: 10px;font-weight: 600;color: #333;">平台数据总览</h2>
</div>-->

<div class="layui-card ns-survey-info ns-card-common" style="display:flex">

    <div class="modelBox">
        <div class="titleA">平台销售总额</div>

        <div class="newinfo">
            <span class="newinfoA">销售额</span>
            <span class="newinfoB">{$today_order_total}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_order_total;
                $y = $yesterday_order_total;
                {/php}
                {$t > $y ? '+' : ''}{$order_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="modelBox">
        <div class="titleA">酒店销售额</div>

        <div class="newinfo">
            <span class="newinfoA">销售额</span>
            <span class="newinfoB">{$today_hotel_order_total}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_hotel_order_total;
                $y = $yesterday_hotel_order_total;
                {/php}
                {$t > $y ? '+' : ''}{$hotel_order_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="modelBox">
        <div class="titleA">本地生活</div>

        <div class="newinfo">
            <span class="newinfoA">销售额</span>
            <span class="newinfoB">{$today_local_order_total}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_local_order_total;
                $y = $yesterday_local_order_total;
                {/php}
                {$t > $y ? '+' : ''}{$local_order_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>

    <div class="modelBox">
        <div class="titleA">商城</div>

        <div class="newinfo">
            <span class="newinfoA">销售额</span>
            <span class="newinfoB">{$today_shop_order_total}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
                环比
                {php}
                $t = $today_shop_order_total;
                $y = $yesterday_shop_order_total;
                {/php}
                {$t > $y ? '+' : ''}{$shop_order_total}
                {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
            </div>
        </div>
    </div>



</div>


<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">平台订单走势</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_order_count_chart">

                        <option value="1">近7天</option>
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time-member-type-balance"></span>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="order_count_main" style="width: 100%; height: 400px;"></div>
    </div>
</div>

<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">订单金额走势</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_order_money_chart">

                        <option value="1">近7天</option>
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time-member-type-point"></span>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="order_money_main" style="width: 100%; height: 400px;"></div>
    </div>
</div>
{/block}
{block name="script"}
<script src="ADMIN_JS/echarts.min.js"></script>
<script>
    $(function() {
        getOrderCountStatChart(1);
        getOrderPriceStatChart(1);
    });

    layui.use(['form'], function() {
        var form = layui.form;

        form.on('select(date_order_count_chart)', function(data) {
            getOrderCountStatChart(data.value);
        });

        form.on('select(date_order_money_chart)', function(data) {
            getOrderPriceStatChart(data.value);
        });
    });

    function getOrderCountStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/index/getOrderCountStatList"),
            data: {
                date_type: date_type
            },
            success: function(res){
                option5.xAxis.data = res.time;
                //option5.series[0].data = res.ordinary_balance;
                option5.series[0].data = res.hotel_order_count;
                option5.series[1].data = res.local_order_count;
                option5.series[2].data = res.shop_order_count;
                $(".current-time-member-type-balance").html(res.time_range);
                myChart5.setOption(option5);
            }
        });
    }

    var myChart5 = echarts.init(document.getElementById('order_count_main'));
    option5 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['酒店订单', '本地生活', '商城']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 个'
            }
        },
        color:['#faa406','#cfbb5d','#c8c7a2'],
        series: [
            {
                name: '酒店订单',
                type: 'bar',
                data: [],
            },
            {
                name: '本地生活',
                type: 'bar',
                data: [],
            },
            {
                name: '商城',
                type: 'bar',
                data: [],
            },
        ]
    };
    option5 && myChart5.setOption(option5);


    function getOrderPriceStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/index/getOrderPriceStatList"),
            data: {
                date_type: date_type
            },
            success: function(res){
                option6.xAxis.data = res.time;
                //option5.series[0].data = res.ordinary_balance;
                option6.series[0].data = res.hotel_order_price;
                option6.series[1].data = res.local_order_price;
                option6.series[2].data = res.shop_order_price;
                $(".current-time-member-type-point").html(res.time_range);
                myChart6.setOption(option6);
            }
        });
    }

    var myChart6 = echarts.init(document.getElementById('order_money_main'));
    option6 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['酒店订单', '本地生活', '商城']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        color:['#faa406','#cfbb5d','#c8c7a2'],
        series: [
            {
                name: '酒店订单',
                type: 'bar',
                //barWidth: 10,
                //barGap:0.01,
                //clip: true,
                data: [],
            },
            {
                name: '本地生活',
                type: 'bar',
                //barWidth: 10,
                //barGap:0.01,
                //clip: true,
                data: [],
            },
            {
                name: '商城',
                type: 'bar',
                //barWidth: 10,
                //barGap:0.01,
                //clip: true,
                data: [],
            },
        ]
    };
    option6 && myChart6.setOption(option6);
</script>
{/block}